<!DOCTYPE html>
<html th:replace="~{layout :: layout(~{::title}, ~{::section})}">
<head>
    <title>文章管理页面</title>

</head>
<body>
<section>
    <link  th:href="@{/admin/dist/lib/datatable/zui.datatable.css}" rel="stylesheet">
    <table class="table datatable" id="articleList">

        <thead>
        <tr>
            <!-- 以下两列左侧固定 -->
            <th data-width="50">#</th>
            <th data-width="50">分类</th>
            <th>文章标题</th>
            <!-- 以下列右侧固定 -->
            <th data-width="100">操作</th>
        </tr>
        <tr>
            <td colspan="4" align="right">
                <a th:href="toedit">添加</a>
            </td>
        </tr>
        </thead>
        <tbody>
        <tr th:each="article : ${page.records}">
            <td th:text="${article.id}"></td>
            <td th:text="${article.catId}"></td>
            <td th:text="${article.title}"></td>

            <td>
                <a th:href="@{toedit(id=${article.id})}">更新</a>
                <a th:href="@{delete(id=${article.id})}">删除</a>
            </td>
        </tr>

        </tbody>
    </table>

    <script th:src="@{/admin/dist/lib/datatable/zui.datatable.js}"></script>
    <script type="text/javascript">
        /* 初始化数据表格 */
        /* 初始化数据表格 */
        $('#articleList').datatable();
    </script>
</section>
</body>
</html>